<template>
  <div>
    <a-modal
      title="车辆详情"
      :visible="visible"
      :confirm-loading="loading"
      :width="720"
      @ok="modalOK"
      @cancel="cancelModal"
    >
      <a-spin :spinning="loading">
        <a-form
          :form="form"
          v-bind="formLayout"
          @submit="formSubmit"
          v-if="detailData"
        >
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="车辆牌照" v-decorator="['id', {rules: [{ required: true, message: '车辆牌照必须填写!' }]}]">
                <a-input
                  v-model="detailData.id"
                  :disabled="(detailData.id === '') ? false : true"
                />
                <!-- <span v-if="detailData.id != ''">{{ detailData.id }}</span> -->
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="车辆名称"
                v-decorator="['name', {rules: [{ required: true, message: '车辆名称必须填写!' }]}]"
              >
                <a-input
                  v-model="detailData.name"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col>
              <a-form-item
                label="车辆照片"
                v-decorator="['photo', {rules: [{ required: true, message: '车辆照片必须填写!' }]}]"
              >
                <!-- <a-input
                  v-model="detailData.photo"
                /> -->
                <a-upload
                  :headers="uploadHeader"
                  :withCredentials="true"
                  name="photo"
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  :customRequest="customRequest"
                >
                  <img style="width:100%;" v-if="imageUrl" :src="imageUrl" alt="avatar" />
                  <div v-else>
                    <a-icon :type="fileLoading ? 'loading' : 'plus'" />
                    <div class="ant-upload-text">
                      Upload
                    </div>
                  </div>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { getCar, addCar } from '@/api/cars'
import { uploadImage } from '@/api/global'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import storage from 'store'

export default {
  name: 'CarsDetail',
  data () {
    return {
      imageUrl: '',
      fileLoading: false,
      uploadHeader: {},
      canBuy: 0,
      loading: false,
      detailData: null,
      formLayout: {
        labelCol: {
          span: 6
          // xs: { span: 24 },
          // sm: { span: 7 }
        },
        wrapperCol: {
          span: 18
          // xs: { span: 24 },
          // sm: { span: 13 }
        }
      },
      form: this.$form.createForm(this, { id: 10000 })
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Object,
      default: null
    }
  },
  watch: {
    visible (news, olds) {
      if (news) {
        this.uploadHeader = {
          AUTHORIZATION: 'Bearer ' + storage.get(ACCESS_TOKEN).toString()
        }
        this.init()
      }
    }
  },
  methods: {
    customRequest (options) {
      const { onSuccess, onError, file, onProgress } = options
      const reader = new FileReader()
      reader.readAsDataURL(file) // 读取图片文件
      reader.onload = (_file) => {
        const arr = _file.target.result.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        console.log(onProgress, onError, onSuccess)
        uploadImage(file, mime).then(res => {
          console.log(res)
          this.imageUrl = res.headers.location
        }).catch(e => {
          console.error(e)
        })
      }
    },
    init () {
      console.log(this.model)
      if (!this.model.hasOwnProperty('id')) {
        this.detailData = {
          id: '',
          name: '',
          photo: ''
        }
        return
      }
      getCar({ id: this.model.id }).then(res => {
        this.detailData = res.data[0]
      }).catch(e => {
        console.error(e)
      })
    },
    modalOK () {
      this.loading = true
      addCar(this.detailData.id, this.detailData).then(res => {
        this.loading = false
        this.$emit('ok')
      }).catch(e => {
        this.loading = false
        console.error(e)
      })
      // console.log(saveCommoditiesLists)
      // this.$emit('cancel')
    },
    cancelModal () {
      this.$emit('cancel')
    },
    formSubmit () {
      console.log('formSubmit')
    },
    canbuyChange () {
      console.log('canbuyChange')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
